<template>
  <view class="container">
    <view class="detail-card">
      <view class="detail-item">
        <text class="label">订单编号：</text>
        <text class="value">{{ orderData.dispatchNumber }}</text>
      </view>
      <view class="detail-item">
        <text class="label">服务名称：</text>
        <text class="value">{{ orderData.serviceName }}</text>
      </view>
      <view class="detail-item">
        <text class="label">服务方式：</text>
        <text class="value">{{ orderData.serviceMethod }}</text>
      </view>
      <view class="detail-item">
        <text class="label">护工姓名：</text>
        <text class="value">{{ orderData.caregiverName }}</text>
      </view>
      <view class="detail-item">
        <text class="label">预约日期：</text>
        <text class="value">{{ formatDate(orderData.appointmentStartDate) }}</text>
      </view>
      <view class="detail-item">
        <text class="label">服务时间：</text>
        <text class="value">{{ orderData.serviceStartTime }} - {{ orderData.serviceEndTime }}</text>
      </view>
      <view class="detail-item">
        <text class="label">订单状态：</text>
        <uni-tag :text="getStatusText(orderData.status)" :type="getStatusType(orderData.status)" />
      </view>
      <view class="detail-item">
        <text class="label">订单金额：</text>
        <text class="value amount">¥{{ orderData.settlementAmount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderData: {}
    };
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      return new Date(dateString).toLocaleDateString('zh-CN');
    },
    getStatusText(status) {
      const statusMap = {
        'PENDING_SETTLE': '待结算',
        'IN_SERVICE': '服务中',
        'SETTLED': '已结算'
      };
      return statusMap[status] || '未知状态';
    },
    getStatusType(status) {
      const typeMap = {
        'PENDING_SETTLE': 'warning',
        'IN_SERVICE': 'primary',
        'SETTLED': 'success'
      };
      return typeMap[status] || 'default';
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.detail-card {
  background: white;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #eee;

  .label {
    width: 160rpx;
    font-size: 28rpx;
    color: #666;
  }

  .value {
    flex: 1;
    font-size: 28rpx;
    color: #333;

    &.amount {
      color: #ff9900;
      font-weight: bold;
    }
  }
}
</style>